<template>
  <div class="app-container disf dirc" style="box-sizing: border-box">
    <template v-if="curStep < 3">
      <el-card shadow="never" class="mb10">
        <el-steps :active="curStep" align-center>
          <el-step title="基础信息" />
          <el-step title="合同填写" />
          <el-step title="套餐材料" />
        </el-steps>
      </el-card>
      <!-- Step1 基础信息 -->
      <BaseInfo ref="baseInfoRef" v-if="curStep == 0" :id="contractId" @next="firstStep" />
      <!-- Step2 合同填写 -->
      <Temp ref="tempRef" v-if="curStep == 1" :id="contractId" @next="nextStep" />
      <!-- Step3 套餐材料 -->
      <Material ref="materialRef" v-if="curStep == 2" :id="contractId" @next="nextStep" />
      <!-- 操作按钮 -->
      <div class="mt20 disf juc">
        <el-button v-if="curStep > 0" @click="handlePrev">上一步</el-button>
        <el-button type="primary" class="ml30" @click="handleNext">下一步</el-button>
      </div>
    </template>
    <template v-else>
      <SuccessDone :id="contractId" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import BaseInfo from "./components/baseInfo.vue";
import Temp from "./components/temp.vue";
import Material from "./components/material.vue";
import SuccessDone from "./components/success.vue";

defineOptions({
  name: "ContractCreate",
  inheritAttrs: false,
});

const route = useRoute();

const curStep = ref(0); //当前步骤
const contractId = ref(""); //合同id

const baseInfoRef = ref();
const tempRef = ref();
const materialRef = ref();

// onActivated(() => {
//   if (route.query.id == contractId.value) return;
//   // id变动 重置数据
//   contractId.value = route.query.id as string;
// });

/**
 * 上一步
 */
function handlePrev() {
  curStep.value--;
}

/**
 * 下一步执行方法
 */
function handleNext() {
  switch (curStep.value) {
    case 0:
      // 第一步：提交基础信息，获取id
      baseInfoRef.value.handleSubmit();
      break;
    case 1:
      // 第2步：提交合同文本
      tempRef.value.handleSubmit();
      break;
    case 2:
      // 第3步：提交材料
      materialRef.value.handleSubmit();
      break;
  }
}

// 下一步
const nextStep = () => curStep.value++;

/**
 * 完成第一步
 */
function firstStep(id?: string) {
  id && (contractId.value = id);
  nextStep();
}
</script>

<style lang="scss" scoped></style>
